<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
		<script type="text/javascript">
			function fun1(){
				alert("你已经点击了按钮1")
			}
		</script>
	</head>
	<body>
		直接为HTMl标签添加事件响应：<button type="button" onclick="fun1()">按钮1</button><br>
		为元素onclick属性添加事件响应：<button type="button" id="atn2">按钮2</button><br>
		使用监听器监听元素的click事件：<button type="button" class="btn3">按钮3</button><br>
		使用JQuery的click()方法实现事件响应：<button type="button" id="atn4">按钮4</button><br>
		使用JQuery的click()方法实现事件响应：<button type="button" class="btn5">按钮5</button><br>
		
		<script type="text/javascript">
			//方法二
			let btn2=document.getElementById("atn2")
			btn2.onclick=fun2;
			function fun2(){
				alert("你已经点击了按钮2")
				}
			//方法三	
			let btn3=document.getElementsByClassName("btn3")[0];
			btn3.addEventListener("click",fun3)
			function fun3(){
				alert("你已经点击了按钮3")
			}
			//方法四
			$(function(){
				$("#atn4").click(function(){
					alert("你已经点击了按钮4")
				})	
			})
			//方法五
			$(function(){
				$(".btn5").bind("click",function(){
					alert("你已经点击了按钮5")
				})
			})
		</script>
	
	
	</body>
</html>
